
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function addEle() {
				// 定位父元素
				var div1 = document.getElementById('div1')
				// var div1_p1 = document.querySelectorAll('div>p')[0]
				// 定位目标的后一个兄弟元素
				var div1_p2 = document.querySelectorAll('div>p')[1]
				// 新的a标签
				var div1_a = document.createElement('a')
				div1_a.href = 'https://www.taobao.com'
				div1_a.innerText = '淘宝首页'
				div1.insertBefore(div1_a, div1_p2)
				// 在新的a标签前面添加一个文本节点
				var div1_text_node = document.createTextNode('今天天气好冷')
				div1.insertBefore(div1_text_node, div1_a)
			}
		</script>
	</head>
	<body>
		<button onclick="addEle()">增加元素</button>
		<div id="div1" class="aaa">
			第一个div标签
			<p>第一个div中的p标签</p>
			<!-- 使用DOM在这里添加一个a标签 -->
			<p>第一个div中的p标签2</p>
			<a>第一个div中的a标签</a>
			第一个div标签的尾部文本
		</div>
		<div>第二个div</div>
		<p class="aaa">第二个p标签</p>
		<p class="aaa">第三个p标签</p>
		<p>第四个p标签</p>
		<p class="aaa">第五个p标签</p>
		<p>第六个p标签</p>
	</body>
</html>